<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>

    <title>分类展示</title>
    <!-- 依 赖 样 式 -->
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
    <!--timeline-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">-->

    <!--    <link rel="stylesheet" th:href="@{/plugins/vali/css/main.css}">-->
    <!--    不能使用bootstrap3，不然可能会导致页面效果不好，因为这个页面是通过bootstrap4来写的-->
    <link th:href="@{/assets/index2/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/index2/css/cl-css.css}" rel="stylesheet">
    <link th:href="@{/assets/index2/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/index2/highlight/styles/railscasts.css}">

    <script th:src="@{/assets/index2/jquery/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src="@{/assets/index2/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/index2/highlight/highlight.pack.js}"></script>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_v7p87hrx9q.css">

    <style>
        .container1 ul {
            margin: 0;
            margin-top: 25px;
            list-style: none;
            position: relative;
            padding: 1px 100px;
            color: #fff;
            font-size: 13px;
        }

        .container1 ul:before {
            content: "";
            width: 1px;
            height: 100%;
            position: absolute;
            border-left: 2px dashed #fff;
        }

        .container1 ul li {
            position: relative;
            margin-left: 30px;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 14px;
            border-radius: 6px;
            width: 250px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
        }

        .cl-card-more {
            width: 555px;
            height: 25.8px;
            float: left;
        }

        .like {
            float: left;
            width: 45.65px;
            height: 24.8px;
        }
    </style>
</head>
<body>
<div class="cl-header container-fluid">
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img th:if="${setting} eq null or ${setting.logo} eq null or ${setting.logo} eq ''"
                     th:src="@{/user/img/bloglogo.jpg}" width="144" height="72" alt="">
                <img th:if="${setting} ne null and ${setting.logo} ne null and ${setting.logo} ne ''"
                     th:src="@{${setting.logo}}" width="144" height="72" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">


                    <li class="nav-item">
                        <div id="searchbox" class="navbar-search" style="height: 40px;">
                            <span class="icon-search" onclick="submitData()"></span>
                            <form id="form" role="search" th:action="@{/search/1}">
                           <span class="search-box">
                                <input style="height: 40px;" type="text" name="searchText" id="search-inp" class="input"
                                       placeholder="全站搜索..."
                                       maxlength="30"
                                       autocomplete="off"/>
                          </span>
                                <input style="height: 40px;" type="button" value="搜索" onclick="submitData()">
                            </form>
                        </div>
                    </li>


                    <li  class="nav-item">
                        <a class="nav-link" th:href="@{/page/1}">首页<span class="sr-only"></span></a>
                    </li>

                    <li  class="nav-item active">
                        <a class="nav-link" th:href="@{/category/list}">分类<span class="sr-only"></span></a>
                    </li>

                    <li  class="nav-item">
                        <a class="nav-link" th:href="@{/archive/list}">归档<span class="sr-only"></span></a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/}" target="_blank">后台管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/toregister}">注册</a>
                    </li>
                    <form name="logoutform" th:action="@{/logout}" method="post"></form>
                    <li class="nav-item">
                        <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/loginPage}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" sec:authorize="isAuthenticated()"
                           href="javascript:document.logoutform.submit();">
                            退出
                        </a>
                    </li>


                </ul>
            </div>
        </nav>
    </div>
</div>


<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">




            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">分类名称</div>
                        <div class="layui-card-body">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <ul class="layui-timeline">
                                            <li class="layui-timeline-item" th:each="cat:${categoryName}">
                                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                <div class="layui-timeline-content layui-text">
                                                    <h3 class="layui-timeline-title">
                                                        <a href="#" style="color: black;text-decoration: none;" th:onclick="categoryChange([[${cat}]])">
                                                            [[${cat}]]
                                                        </a>
                                                    </h3>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md8">
                    <div class="layui-card">
                        <div class="layui-card-header">分类文章&nbsp;&nbsp;
                            (<span id="categoryName" style="color: #2D8CF0">[[${categoryName.get(0)}]]</span>)
                        </div>
                        <div class="layui-card-body">
                            <ul class="list">
                                <div id="categorylist">
                                    <li class="list-item layui-card" th:each="categoryArticle:${categoryArticles}">
                                        <a th:href="${commons.permalink(categoryArticle.id)}" target="_blank">
                                            <span class="title">[[${categoryArticle.title}]]</span>
                                        </a>
                                    </li>
                                </div>
                            </ul>

                        </div>
                    </div>

                </div>
            </div>


        </div>
        <div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title" th:if="${userDetail} ne null" th:text="${userDetail.getJob()}"></div>
                    <div style="text-align: center;" class="right-card-title" th:if="${userDetail} eq null">请登录</div>
                    <div class="cl-code">
                        <img th:src="@{/user_img/user_default.jpg}" alt="about me" class="img-fluid"
                             th:if="${userDetail} eq null or ${userDetail.getIcon()} eq '' or ${userDetail.getIcon()} eq null  ">
                        <img th:src="${userDetail.getIcon()}" alt="about me" class="img-fluid"
                             th:if="${userDetail} ne null and  ${userDetail.getIcon()} ne '' and  ${userDetail.getIcon()} ne null">

                    </div>

                </div>
            </div>


            <!--            推荐-->
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">推荐文章</div>
                    <ul class="right-recommended-list">
                        <li th:each="recommend:${recommends}" >
                            <a th:href="${commons.permalink(recommend.id)}" target="_blank">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <span th:text="${recommendStat.index+1}+'、'+${recommend.title}"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">阅读排行榜</div>
                    <!--                    <div class="right-recommended"><a href="#"><img src="#" class="img-fluid" alt=""></a></div>-->
                    <ul class="right-recommended-list">
                        <li th:each="articleOrder :${articleOrders}">
                            <a th:href="@{'/article/'+${articleOrder.id}}" target="_blank">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <span th:text="${articleOrderStat.index+1}+'、'+${articleOrder.title}+'('+${articleOrder.statistic.hits}+')'"></span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">热门标签</div>
                    <ul class="label">
                        <li th:each="tag:${tags}">
                            <a href="#" th:text="${tag.getTagName()}+'('+${tag.getTagCount()}+')'"></a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">友情链接</div>
                    <ul class="label">
                        <li th:each="link:${links}">
                            <a th:href="${link.getLink()}" th:text="${link.getTitle()}" target="_blank"></a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>




    </div>


</div>

<div class="container-fluid cl-footer">
    <div class="container">
        <p class="cl-copyright" th:if="${setting} eq null or ${setting.foot} eq null">2021 &copy; Powered By 游政杰</p>
        <p class="cl-copyright" th:if="${setting} ne null and ${setting.foot} ne null" th:text="${setting.foot}"></p>
    </div>
</div>
<script th:inline="javascript">


    hljs.initHighlightingOnLoad();

    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }


    /*单击出现爱心特效*/
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
        }
    })(window, document);




    //ajax局部刷新分类数据
    function categoryChange(categoryName) {
        $.ajax({
            url: "/category/data",
            data: {
                "categoryName": categoryName
            },
            type: "GET",
            success: function (data) {
                var obj = JSON.parse(data); //将前端传的list集合的json转成list集合

                document.getElementById('categoryName').innerHTML=categoryName; //修改分类名称
                var html='';

                for (let i = 0; i < obj.length; i++) {
                    let hf= '/article/'+obj[i].id;
                    html+='<li class="list-item layui-card">'+'<a href="'+hf+'" target="_blank">'
                        +'<span class="title">'+obj[i].title+'</span>'+'</a>'+'</li>'
                }

                document.getElementById('categorylist').innerHTML=''

                $('#categorylist').append(html);

            }

        });


    }


</script>
</body>
</html>